<template>
  <keep-alive>
     
  
    <div  class="home">
      <!-- 头部标题 -->
      <VueMovieHeader />
      <div v-if=" noMovie">
      <MusicLaoding />
    </div>
      <VueMovieHomeTab
        :noMovie="noMovie"
        :movieList="movieList"
        :coming="coming"
        :movieListshow="movieListshow"
        :comingshow="comingshow"
         :goodlist="goodlist"
         :nogood="nogood"
      />
      <VueMovieTabBar :active="0" />
    </div>
  </keep-alive>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
import { GetmovieOnInfoListAPI, GetcomingListAPI , GETGOODAPI} from "@/api/api.js";
import VueMovieHomeTab from "@/components/home/home_tab.vue";
import VueMovieTabBar from "@/components/common/tab_bar.vue";
import VueMovieHeader from "@/components/common/header.vue";
import MusicLaoding from "@/components/common/laoding.vue";

export default {
  name: "VueMovieHome",
  components: {MusicLaoding, VueMovieHomeTab, VueMovieTabBar, VueMovieHeader },
  data() {
    return {
      movieList: [],
      coming: [],
      movieListshow: true,
      comingshow: true,
      noMovie: false,
       goodlist:[],
       nogood:true,
    };
  },

  mounted() {
    this.reload();
 
  },
  computed: {
    ...mapState(["cityId"]),
  },
  methods: {
    reload() {
      this.noMovie = false;
      axios
        .all([
           GETGOODAPI(),
          GetmovieOnInfoListAPI(),
      
          GetcomingListAPI({ ci: this.cityId,  limit: 12 }),
        ])
        .then(
          axios.spread((regood,movieOnInfoList, comingList) => {
            this.goodlist=regood.data.movieList
            this.movieList = movieOnInfoList.data.movieList;
            this.coming = comingList.data.coming;
              if (regood.status == 200) {
              this.nogood = false;
            }
            if (movieOnInfoList.status == 200) {
              this.movieListshow = false;
            }
           
            if (comingList.status == 200) {
              this.comingshow = false;
            }
            if (this.movieList.length == 0 || this.coming.length ==0 || this.goodlist==0) {
              this.noMovie = true;
            }
          })
        );
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  padding: 50px 0;
}
</style>